<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:mtg="http://www.patelski.myself/jsf"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

	<ui:define name="body">

		<rich:tabPanel style=" width : 100%; " switchType="client">
			<rich:tab id="cardData" style=" width: 100%; " label="Card"
				styleClass="tab">
				<h:panelGrid columns="1" style=" width : 100%; " cellpadding="2px"
					cellspacing="2px">
					<h:panelGrid columns="2" styleClass="#{cardHome.instance.color} "
						columnClasses="cardData, cardPicture" style=" width : 100%; "
						cellpadding="2px" cellspacing="2px">


						<rich:panel style="width : 100%; ">
							<f:facet name="header">
								<h:outputText value="#{cardHome.instance.cardName}"
									styleClass="header" />
							</f:facet>
							<h:panelGrid columns="2" style=" width : 100%; "
								cellpadding="2px" cellspacing="2px">

								<s:decorate id="headerCardName" template="layout/display.xhtml">
									<ui:define name="label">Cardname</ui:define>
					            	#{cardHome.instance.cardName}
								</s:decorate>
								<s:decorate id="headerCardEdition"
									template="layout/display.xhtml">
									<ui:define name="label">Edition</ui:define>
					            	#{cardHome.instance.edition.name}
								</s:decorate>
								<s:decorate id="headerCardRarity"
									template="layout/display.xhtml">
									<ui:define name="label">Rarity</ui:define>
					            	#{cardHome.instance.rarity}
								</s:decorate>
								<s:decorate id="headerCardColor" template="layout/display.xhtml">
									<ui:define name="label">Color</ui:define>
					            	#{cardHome.instance.color.description}
								</s:decorate>
								<s:decorate id="headerCardCastingCost"
									template="layout/display.xhtml">
									<ui:define name="label">Casting cost</ui:define>
					            	#{cardHome.instance.cost}
								</s:decorate>
								<s:decorate id="headerCardPowerToughness"
									template="layout/display.xhtml">
									<ui:define name="label">Power &amp; Toughness</ui:define>
					            	#{cardHome.instance.powerToughness}
								</s:decorate>
								<s:decorate id="headerCardType" template="layout/display.xhtml">
									<ui:define name="label">Type</ui:define>
					            	#{cardHome.instance.type}
								</s:decorate>
								<s:decorate id="headerCardText" template="layout/display.xhtml">
									<ui:define name="label">Card-text</ui:define>
					            	#{cardHome.instance.text}
								</s:decorate>
								<s:decorate id="headerCardFlavor"
									template="layout/display.xhtml">
									<ui:define name="label">Flavor-text</ui:define>
					            	#{cardHome.instance.flavor}
								</s:decorate>
								<s:decorate id="headerCardArtist"
									template="layout/display.xhtml">
									<ui:define name="label">Artist</ui:define>
					            	#{cardHome.instance.artist}
								</s:decorate>
								<s:decorate id="headerCardCollectorNumber"
									template="layout/display.xhtml">
									<ui:define name="label">Collector number</ui:define>
					            	#{cardHome.instance.collectorNumber}
								</s:decorate>
								<s:decorate id="headerCardFoil" template="layout/display.xhtml">
									<ui:define name="label">Foil</ui:define>
					            	#{cardHome.instance.foil.description}
								</s:decorate>
								<div style="clear: both" />
							</h:panelGrid>
						</rich:panel>

						<rich:panel>
							<f:facet name="header">
								<h:outputText value="#{cardHome.instance.cardName}"
									styleClass="header" />
							</f:facet>
							<!-- mtg:photo src="#{cardHome.instance.picture}"
								missingSrc="/img/CardImageMissing.jpg" width="150" / -->

							<!-- s:graphicImage url="http://localhost:8080/mtg-cardpictures-#{cardHome.instance.edition.id}/#{cardHome.instance.cardName}.full.jpg">
                                	    <s:transformImageSize width="150" maintainRatio="true" />
                                    </s:graphicImage -->

							<h:graphicImage style="width:200px;height:300;"
								url="http://localhost:8080/mtg-cardpictures-#{cardHome.instance.edition.id}/#{cardHome.instance.cardNameEncoded}.full.jpg" />

							<!-- h:graphicImage url="http://localhost:8080/mtg-cardpictures-#{cardHome.instance.edition.id}/#{cardHome.instance.cardNameEncoded}.full.jpg" / -->
						</rich:panel>
					</h:panelGrid>

				</h:panelGrid>
			</rich:tab>
		</rich:tabPanel>

		<div class="actionButtons"><s:button view="/CardEdit.xhtml"
			id="edit" value="Edit" /> <s:button
			view="/#{empty cardFrom ? 'CardList' : cardFrom}.xhtml" id="done"
			value="Done" /></div>
	</ui:define>

</ui:composition>
